<template>
 <div class="layout" :class="{overflowy:overflowy}">
  
   <div class="img01" id="img01" ref="img01" :class="{openDownLeft:openDownLeft, animated:animated}"></div>
   <div class="img02" id="img02" ref="img02" :class="{openDownRight:openDownRight, animated:animated}"></div>
   <div class="img03" ref="img03" :class="{bombRightOut:bombRightOut, animated:animated}"></div>
  <div class="head"></div>
   
   <div class="hat" :class="{tinUpOut:tinUpOut, animated:animated}">
      <div class="img04" :class="{spaceOutLeft:spaceOutLeft, animated:animated}"></div>
      <div class="img05" :class="{spaceOutRight:spaceOutRight, animated:animated}"></div> 
      <div class="rulebtn" @click="showActiveRule" :class="{dis:dis}" ca="201788_cxjylhd_hdgz$活动规则">活动规则</div>
       
   </div>  
<div class="grass" :class="{boingOutDown:boingOutDown, animated:animated}"></div>
 <div class="arrow magic" @click="checkState" :class="{dis:dis}" ca="201788_cxjylhd_cj$抽奖按钮"></div>
<!-- 未中奖弹框 -->
   <div class="fail-layout" v-show="!drawState" :class="{tinUpIn:tinUpIn,animated:animated,show:show}">
     <div class="overlay"></div>
     <div class="fail">
       <div class="header"></div>
       <div class="content">
         <p>快分享朋友圈<br/>就能再获一次抢券机会哦</p>
       </div>
       <div class="footer">
         <span class="share" @click="popShare"></span><span class="more"  @click="gotoMore"></span>
       </div>
     </div>
   </div>
<!-- 中奖弹框 -->
   <div class="success-layout"  v-show="drawState" :class="{tinUpIn:tinUpIn,animated:animated,show:show}">
      <div class="overlay"></div>
     <div class="success">
       <div class="header">
      <div class="coupon01" v-if="couponIndex==4"><img src="../../assets/image/share/coupon01.png" /></div>
             <div class="coupon01" v-if="couponIndex==5"><img src="../../assets/image/share/coupon02.png" /></div>
             <div class="coupon01" v-if="couponIndex==6"><img src="../../assets/image/share/coupon03.png" /></div> 
       <div class="coupon01 coupon02"  v-if="couponIndex==7" ><img  class="commcoupon" src="../../assets/image/share/88commcoupon.png" /></div> 
      <div class="coupon01" v-if="couponIndex==0"><img src="../../assets/image/share/99xichecoupon.png" /></div>
    <div class="coupon01 coupon02" v-if="couponIndex==1"><img src="../../assets/image/share/38dlcopon.png" /></div>
    <div class="coupon01 coupon02" v-if="couponIndex==2"><img src="../../assets/image/share/38aircoupon.png" /></div> 
    <div class="coupon01" v-if="couponIndex==3"><img src="../../assets/image/share/coupon04.png" /></div>
    </div> 
       <div class="content">
         <p class="info">礼券已发送您的车享账户中，<span @click="qqbck" ca="201788_cxjylhd_wdyhq$券中心">立即查看</span></p>
         <p class="warning" v-if="isShowGiftTip">还有好友大礼包<br/>赶紧分享，再得一份好礼</p>
       </div>
       <div class="footer">
         <span class="share" @click="popShare" v-if="isShowShare" ca="201788_cxjylhd_sharelb$分享礼包"></span><span class="more"  @click="gotoMore" ca="201788_cxjylhd_cxjfhc$更多优惠"></span>
       </div>
       <div class="link"><span @click="gotoStroeList">查询门店信息</span></div>
     </div>
   </div>
   <div class="rule" v-show="showRule"></div>
    <div class="goback" v-show="showGoback" @click="showActiveRule"></div>
   <!--微信分享朋友圈引导弹框-->
     <div class="popupshare-bg" v-show="popupShare" v-on:click="popupshareControl"></div>
     <div class="loading" v-show="showLoading"></div>
</div>
</template>
<script type="text/javascript">
import common from "../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
Vue.component(Popup.name, Popup);
export default {
    data: function() {
        return {
            layoutHeight:0 ,
            animated:false,
            openDownLeft:false,
            openDownRight:false,
            bombRightOut:false,
            tinUpOut:false,
            spaceOutLeft:false,
            spaceOutRight:false,
            boingOutDown:false,
            dis:false,
            show:false,
            tinUpIn:false,
            couponIndex:0,
            drawState:false,
            initSignUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
            popupShare:false,
            isShowShare:true,
            isShowGiftTip:true,
            overflowy:false,
            isSuccess:false,
            showRule:false,
            showGoback:false,
            showLoading:false,
            giftPackCode:""
        }
    },
    computed: {
    },
    mounted: function() {
      this.initShareInfo();
    },
    components: {  },
    methods: {
      gotoStroeList:function(){
         window.location.href = "https://h.jia.chexiang.com/store/wxStorelist.htm";
      },
      checkState:function(){
        var _this = this;
        this.showLoading = true;
        _this.$http.get(common.isdev() + "/service/x1788/user/state").then(function(d) {
          var obj = JSON.parse(d.bodyText);
          var code = obj.code?obj.code:"",
          result = obj.result?obj.result:"",
          coupon = result.coupon?result.coupon:"";
          if(code==0){
             var state = result.state;
             var giftPackCode = result.giftPackCode;
             _this.giftPackCode = giftPackCode;
              console.log(state,"state");
           if(state === 0){//用户未登录
            _this.showLoading = false;
                var backUrl = encodeURIComponent(window.location.href);
                console.log(backUrl);
                window.location.href = common.isdev() + "/service/error/user_not_logined?backUrl="+backUrl;
              }else if(state === 1||state===3){//用户没有参与过"抽奖"
                _this.showLoading = false;
                _this.startAnimation();
              }else if(state === 2){
                _this.showLoading = false;
                //中奖失败页面
                _this.drawState = false;
                _this.dis = true;
                _this.animated = true;
                _this.tinUpIn = true;
                _this.show=true;
                _this.overflowy = true;
                _this.isSuccess = false;
                _this.initShareInfo(false,giftPackCode); 
                Toast("您已经抽过奖，快分享朋友圈，就能再获一次抢券机会哦");
             }else if(state===4||state ===5){
              _this.showLoading = false;
                //提示用户已经中过奖了
                var index = coupon.idx;
                _this.couponIndex =  index;
                _this.drawState = true;
                _this.dis = true;
                _this.animated = true;
                _this.tinUpIn = true;
                _this.show=true;
                _this.overflowy = true;
                _this.isSuccess = true;
                _this.initShareInfo(true,giftPackCode);
                Toast("不要太贪心哦，您已经中过奖了");
            }else if(state === 6){
              _this.showLoading = false;
                //去掉分享按钮
                _this.isShowShare = false;
                 var index = coupon.idx;
                _this.couponIndex =  index;
                _this.isShowGiftTip = false;
                _this.drawState = true;
                _this.dis = true;
                _this.animated = true;
                _this.tinUpIn = true;
                _this.show = true;
                _this.overflowy = true;
                _this.isSuccess = false;
                _this.initShareInfo(false,giftPackCode);
                Toast("不要太贪心哦，您已经中过奖了");
             }
           }else if(code==1){
              var msg = obj.message?obj.message:"操作失败";
               Toast(msg);
           }
        }, function(err) {
           Toast(err);
        });
      },
      startAnimation:function(){
        var _this = this;
        _this.$http.get(common.isdev() + "/service/x1788/draw").then(function(d) {
          var obj = JSON.parse(d.bodyText);
          var code = obj.code?obj.code:"",
          result = obj.result?obj.result:"",
          coupon = result.coupon?result.coupon:"";
          if(code==0){
            var state = result.state;
            var giftPackCode = result.giftPackCode;
            _this.giftPackCode = giftPackCode;
            if(state === 1){//中奖
              var index = coupon.idx;
              _this.couponIndex =  index;
              _this.drawState = true;
              _this.dis = true;
              _this.animated = true;
              _this.openDownLeft = true;
              _this.openDownRight = true;
              _this.bombRightOut = true;
              _this.tinUpOut = true;
              _this.spaceOutLeft = true;
              _this.spaceOutRight = true;
              _this.boingOutDown =true;
              _this.tinUpIn = true;
              _this.show=true;
              _this.overflowy = true;
              _this.isSuccess = true;
              _this.initShareInfo(true,giftPackCode);
            }else if(state == 0){//未中奖
              _this.drawState = false;
              _this.dis = true;
              _this.animated = true;
              _this.openDownLeft = true;
              _this.openDownRight = true;
              _this.bombRightOut = true;
              _this.tinUpOut = true;
              _this.spaceOutLeft = true;
              _this.spaceOutRight = true;
              _this.boingOutDown =true;
              _this.tinUpIn = true;
              _this.show=true;
              _this.overflowy = true;
              _this.isSuccess = false;
              _this.initShareInfo(false,giftPackCode);
            }else if(state === -1){
               Toast("该券今天已领完，明天再来抽奖");
            }else if(state===-3){
              Toast("该券今天已领完，并是最后一天活动,活动结束");
            }
          }else if(code == -99){
            var backUrl = encodeURIComponent(window.location.href);
            console.log(backUrl);
           window.location.href = common.isdev() + "/service/error/user_not_logined?backUrl="+backUrl;
          }
        }, function(err) {
           Toast(err);
        });
        
      },
      initShareInfo:function(isSuccess,giftPackCode){
          var _this = this;
          if(isSuccess){
            _this.shareObj = {
              friend:{
                shareTitle:"0元洗车，1元打蜡，1元空气净化……海量养车优惠券，开帽等你抢！",
                descContent:"8.8来车享，养车优惠一起享！",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/share.jpg",
                lineLink:window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/packs/packs.shtml?giftPackCode="+giftPackCode
              },
              friendQuan:{
                shareTitle:"0元洗车，1元打蜡，1元空气净化……海量养车优惠券，开帽等你抢！",
                descContent:"",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/share.jpg",
                lineLink:window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/packs/packs.shtml?giftPackCode="+giftPackCode
              }
            }
           
          }else{
             _this.shareObj = {
              friend:{
                shareTitle:"0元洗车，1元打蜡，1元空气净化……海量养车优惠券，开帽等你抢！",
                descContent:"8.8来车享，养车优惠一起享！",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/share.jpg",
                lineLink:window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/share.shtml"
              },
              friendQuan:{
                shareTitle:"0元洗车，1元打蜡，1元空气净化……海量养车优惠券，开帽等你抢！",
                descContent:"",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/share.jpg",
                lineLink:window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/share.shtml"
              }
            }
          }
          if(!common.isApp()){
             common.initWxShare(_this, _this.initSignUrl, _this.shareObj, 1,function(){
                if(!_this.isSuccess){
                   //Toast("分享成功");
                    //_this.shareSucess88();
                    window.setTimeout(function(){
                        window.location.href=window.location.href+"?id="+10000*Math.random();
                    },2000)
                }
             });
          }
        },
        shareSucess88:function(){
         // Toast("分享成功");
          this.$http.get(common.isdev()+"/service/x1788/shared").then(function(d){
              //window.location.reload();
             // window.location.href=window.location.href+"?id="+10000*Math.random();
              console.info(d);
          },function(err){
              Toast("分享回调失败");
          })
        },
        isDiDa:function(){
          var ua = window.navigator.userAgent;//获取ua
          if(ua.indexOf("DidaPinche")>=0){
            return true;
          }else{
            return false;
          }
        },
        base64Encode(input){
          var rv;
          rv = encodeURIComponent(input);
          rv = unescape(rv);
          rv = window.btoa(rv);
          return rv;
        },
        popShare:function(){
          var _this= this;
          _this.shareSucess88();
          if(common.isApp()){ 
              lb.shareInfo({
                  url : _this.shareObj.friend.lineLink,
                  title : _this.shareObj.friend.descContent,
                  content : _this.shareObj.friend.shareTitle,
                  imgUrl : _this.shareObj.friend.imgUrl
              },function (data) {
                if(data.errorCode == 0){
                  if(!_this.isSuccess){
                   //Toast("分享成功");
                    //_this.shareSucess88();
                    window.setTimeout(function(){
                        window.location.href=window.location.href+"?id="+10000*Math.random();
                    },2000)
                  }
                  //Toast(data.errorCode)
                }else{
                  Toast("分享失败");
                }
              })
          }else if(_this.isDiDa()){
            var share = {};
               share.t = "0元洗车，1元打蜡，1元空气净化……海量养车优惠券，开帽等你抢！";
               share.d = "8.8来车享，养车优惠一起享！";
               share.i = "";
               if(_this.isSuccess){
                  share.u = window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/packs/packs.shtml?giftPackCode="+_this.giftPackCode;//这里放分享之后页面的链接
               }else{
                  share.u = window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/share.shtml";//这里放分享之后页面的链接 
               }
             var encodeurl = "http://n/" + _this.base64Encode(JSON.stringify(share));
             window.location.href = encodeurl;
          }else {
             _this.popupShare = !_this.popupShare;
          }
        },
        popupshareControl:function(){
           this.popupShare = !this.popupShare;
        },
        qqbck (){
          //去券包查看
          /*var cxjappHost = "";
          var isApp = common.isApp();
          var host = window.location.host;
          if(isApp){
            if (host.indexOf("sit") > -1) {
              cxjappHost = "//cxjapp.chexiangsit.com";
            } else if (host.indexOf("pre") > -1) {
              cxjappHost = "//cxjapp.chexiangpre.com";
            } else {
              cxjappHost = "//cxjapp.chexiang.com";
            }
            console.log("去券包查看");
            window.location.href = cxjappHost + "/service/usercoupon/getUserCouponList/1?couponType=1&userId=";
          }*/
           var env = process.env.NODE_ENV;
          console.log(env,"env");
          var isApp = common.isApp();
      
              if(!isApp){
                var urlMap = {
                    'prod':'//member.chexiang.com/m/coupon.htm',
                    'pre':'//member.chexiangpre.com/m/coupon.htm',
                    'sit':'//member.chexiangsit.com/m/coupon.htm'
                }
                 window.location.href= urlMap[env]||urlMap['prod'];
              }else{
                 lb.getUserInfo(function(data){
                 var userToken = data.text.token;
                 //个人中心券列表
                  var urlMap = {
                      'prod':'//cxjapp.chexiang.com/service/usercoupon/getUserCouponList/1?couponType=1&userToken='+userToken,
                      'pre':'//cxjapp.chexiangpre.com/service/usercoupon/getUserCouponList/1?couponType=1&userToken='+userToken,
                      'sit':'//cxjapp.chexiangsit.com/service/usercoupon/getUserCouponList/1?couponType=1&userToken='+userToken
                  };
                   window.location.href= urlMap[env]||urlMap['prod'];
                })
              } 
        },
        gotoMore:function(){
          var env = process.env.NODE_ENV;        
          var urlMap = {
            'prod':'//cxjapp.chexiang.com/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml?channel=cx_cxj_201788_88djyqx_20170807?userInfo='+common.getQueryString("userInfo"),
            'pre':'//cxjapp.chexiangpre.com/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml?channel=cx_cxj_201788_88djyqx_20170807?userInfo='+common.getQueryString("userInfo"),
            'sit':'//cxjapp.chexiangsit.com/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml?channel=cx_cxj_201788_88djyqx_20170807?userInfo='+common.getQueryString("userInfo")
          }
            window.location.href= urlMap[env]||urlMap['prod'];
        },
        showActiveRule:function(){
          this.showRule = !this.showRule;
          this.showGoback = !this.showGoback;
        },
        gobackIndex:function(){
          this.showRule = !this.showRule;
          this.showGoback = !this.showGoback;
        }
    } 
}  
  
</script>
<style lang="scss">
@import '../../assets/css/common.scss';
@function rem($px){
  @return $px / 40 * 1rem;
}
body{
    margin: 0;
    padding: 0;
    background:#4885b9 url("../../assets/image/share/bg.png") no-repeat top left;
    background-size:cover;
    width:100%;
}
.layout{
  width:rem(1500);
  height:100%;
  overflow-x:hidden;
  position:absolute; 
  min-height:rem(2300);
  z-index:1; 
}
.dis{
  display:none;
}
.fail-layout,.success-layout{
  display:none;
  width: rem(1500);
  height: 100%;
  position: fixed;
  z-index: 600;
}
.show{
  display:block;
}
.overflowy{
  overflow-y:hidden;
}
.rulebtn{
  position:absolute;
  color:#fff;
  font-size:rem(46);
  text-decoration:underline;
  top:rem(1000);
  left:rem(-100);
  margin-left:50%;
  box-shadow: 5px 5px 5px #000;
}
.rule{
  width:rem(1500);
  height:rem(3070);
  background:#4885b9 url("../../assets/image/share/rules.png") no-repeat top left;
  background-size:rem(1500) rem(3070);
  position:absolute;
  top:0;
  right:0;
  z-index:550;
}
.goback{
  width:rem(428);
  height:rem(584);
  background:transparent url("../../assets/image/share/goback.png") no-repeat top left;
  background-size:cover;
  position:fixed;
  bottom:0;
  right:0;
  z-index:570;
}
.img01{
  width:rem(669);
  height:rem(406);
  background:transparent url("../../assets/image/share/img01.png") no-repeat center center;
  background-size:rem(669) rem(406);
  position:absolute;
  top:0;
  left:0;
  z-index:560;

}
.img02{
  width:rem(1337);
  height:rem(1235);
  background:transparent url("../../assets/image/share/img02.png") no-repeat center center;
  background-size:rem(1337) rem(1235);
  position:absolute;
  top:rem(50);
  right:0;
  z-index:300;
}
.img03{
  width:rem(317);
  height:rem(270);
  background:transparent url("../../assets/image/share/img03.png") no-repeat center center;
  background-size:rem(317) rem(270);
  position:absolute;
  top:rem(73);
  right:rem(105);
  z-index:450;
}
.head{
  width:rem(1430);
  height:rem(907);
  background:transparent url("../../assets/image/share/head.png") no-repeat center center;
  background-size:rem(1430) rem(907);
  position:absolute;
  bottom:0;
  left:rem(-676);
  margin-left:50%; 
}
.grass{
  width:rem(1300);
  height:rem(1363);
  background:transparent url("../../assets/image/share/grass.png") no-repeat center center;
  background-size:rem(1300) rem(1363);
  position:absolute;
  bottom:rem(400);
  left:rem(-680);
  margin-left:50%;
  opacity:0;
  z-index:100;
}
.hat{
  width:rem(1244);
  height:rem(1376);
  background:transparent url("../../assets/image/share/hat.png") no-repeat center center;
  background-size:rem(1244) rem(1376);
  position:absolute;
  bottom:rem(220);
  left:rem(-680);
  margin-left:50%;
  z-index:200;
}
.img04{
  width:rem(586);
  height:rem(657);
  background:transparent url("../../assets/image/share/img04.png") no-repeat center center;
  background-size:rem(586) rem(657);
  position:absolute;
  bottom:rem(120);
  left:rem(-640);
  margin-left:50%;
}
.img05{
  width:rem(490);
  height:rem(660);
  background:transparent url("../../assets/image/share/img05.png") no-repeat center center;
  background-size:rem(490) rem(660);
  position:absolute;
  bottom:rem(306);
  right:rem(88);
}
.arrow{
  width:rem(714);
  height:rem(231);
  background:transparent url("../../assets/image/share/arrow.png") no-repeat center center;
  background-size:rem(714) rem(231);
  position:absolute;
  bottom:rem(1120);
  right:rem(80);
  z-index:510;
}
.fail{
   position:absolute;
   width:100%;
   height:100%;
   z-index:200;
  .header{
    height:rem(1176);
    background:transparent url("../../assets/image/share/fail-head.png") no-repeat center center;
    background-size:rem(1305) rem(1176);
  }
  .content{
    font-size:rem(66);
    color:#e5c13f;
    text-align:center;
    margin-top:rem(220);
  }
  .footer{
    text-align:center;
    position:absolute;
    width:100%;
    bottom:rem(200);
    .share{
      display:inline-block;
      background:transparent url("../../assets/image/share/share-icon.png") no-repeat center center;
      background-size:rem(689) rem(254);
      width:rem(689);
      height:rem(254);
    }
    .more{
      display:inline-block;
      background:transparent url("../../assets/image/share/more.png") no-repeat center center;
      background-size:rem(709) rem(254);
      width:rem(709);
      height:rem(254);
    }
  }
}
.success{
   position:fixed;
   width:rem(1500);
   height:100%;
   z-index:200;
  .header{
    position:relative;
    height:rem(1176);
    background:transparent url("../../assets/image/share/success-head.png") no-repeat center center;
    background-size:rem(1305) rem(1176);
    overflow: hidden;
    .coupon01{
      padding-top:rem(760);
      text-align:center;
      img{
        width:rem(1500);
        height:rem(337);
      }
    }
    .coupon02{
      img{
        width:rem(1300);
      }
      img.commcoupon{
        height:auto !important;
        margin-top:rem(-80)
      }
    }
  }
  .content{
    font-size:rem(66);
    color:#e5c13f;
    text-align:center;
    margin-top:rem(90);
    .info{
      font-size:rem(50);
      color:#fff;
      span{
        color:#e0b13f;
        text-decoration:underline;
      }   
    }
    .warning{
       height:rem(287);
       padding-top:rem(45);
       background:transparent url("../../assets/image/share/line-show.png") no-repeat center center;
       background-size:rem(1500) rem(287);
       margin-top:rem(70);
    }
  }
  .footer{
    text-align:center;
    position:absolute;
    width:100%;
    bottom:rem(200);
    .share{
      display:inline-block;
      background:transparent url("../../assets/image/share/share-gifts.png") no-repeat center center;
      background-size:rem(689) rem(254);
      width:rem(689);
      height:rem(254);
    }
    .more{
      display:inline-block;
      background:transparent url("../../assets/image/share/more.png") no-repeat center center;
      background-size:rem(709) rem(254);
      width:rem(709);
      height:rem(254);
    }
  }
  .link{
    text-align:center;
    position:absolute;
    width:100%;
    bottom:rem(100);
    span{
      color:#fff;
      text-decoration:underline;
      font-size:rem(50);
    }
  }
}
.overlay{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0b172b;
    opacity: 0.9;
    z-index: 190;
}

.popupshare-bg{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background:#000 url("../../assets/image/share/share-bg.png") no-repeat bottom left;
    background-size:contain;
    z-index:10000;
    background-color: rgba(11, 23, 43, 0.8);
}
.loading{
  position:fixed;
  width:100%;
  height:100%;
  background:transparent url("../../assets/image/loading.gif") no-repeat center center;
  /* background-color: rgba(11, 23, 43, 0.8); */
  background-size:rem(200) rem(200);
  z-index:600;
}
/****动画*****/
.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}
.magic{
  animation:magicfly 2s infinite linear;
}
@keyframes magicfly{
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translate3d(10%, 0, 0) rotate3d(0,0, 1, 6deg);
  }
  100%{
    opacity: 1;
   /*  transform: translate3d(0, 0, 0) rotate3d(0,0, 1, 6deg); */
  }
}
@keyframes rollOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(50%, 0, 0) rotate3d(0, 0, 1, -60deg);
  }
}

.rollOutLeft {
  animation-name: rollOutLeft;
}
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  animation-name: rollOut;
}


.openDownLeft {
  animation-name: openDownLeft;
}
@keyframes openDownLeft {
  0% {
    transform-origin: bottom left;
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }

  100% {
    transform-origin: bottom left;
    transform: rotate(-110deg);
    animation-timing-function: ease-in-out;
  }
}

.openDownRight {
  animation-name: openDownRight;
}
@keyframes openDownRight {
  0% {
    transform-origin: bottom right;
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }

  100% {
    transform-origin: bottom right;
    transform: rotate(110deg);
    animation-timing-function: ease-in-out;
  }
}

.bombRightOut {
  animation-name: bombRightOut;
}
@keyframes bombRightOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    filter: blur(0px);
  }

  50% {
    opacity: 1;
    transform-origin: 200% 50%;
    transform: rotate(160deg);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 200% 50%;
    transform: rotate(160deg);
    filter: blur(20px);
  }
}
.tinRightIn {
  animation-name: tinRightIn;
}
@keyframes tinUpIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
}
.tinUpOut {
  animation-name: tinUpOut;
 /*  animation-delay:2s;
 -webkit-animation-delay:2s; Safari 和 Chrome */
}
@keyframes tinUpOut {
  0% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }

 /*  10%, 30% {
   opacity: 1;
   transform: scale(1.1, 1.1) translateY(0);
 } */

  100% {
    opacity: 1;
    transform: scale(1, 1) translateY(-130%);
  }
}

.spaceOutLeft {
  animation-name: spaceOutLeft;
  animation-delay:1s;
  -webkit-animation-delay:1s; /* Safari 和 Chrome */
}
@keyframes spaceOutLeft {
  0% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(.2) translate(-200%, 0%);
  }
}
.spaceOutRight {
  animation-name: spaceOutRight;
  animation-delay:1s;
 -webkit-animation-delay:1s; /* Safari 和 Chrome */
}
@keyframes spaceOutRight {
  0% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(.2) translate(200%, 0%);
  }
}
.boingInUp {
  animation-name: boingInUp;
  animation-delay:4s;
  -webkit-animation-delay:4s; /* Safari 和 Chrome */
}
@keyframes boingInUp {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(-90deg);
  }
  
  50% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(50deg);
  }

  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(0deg);
  }
}
.boingOutDown {
  animation-name: boingOutDown;
  /*  animation-delay:0.2s;
    -webkit-animation-delay:0.2s; Safari 和 Chrome */
}
@keyframes boingOutDown {
  0% {
    opacity: 0.8;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(60deg) rotateY(0deg); 
  }
  
 /*  20% {
   opacity: 1;
   transform-origin: 0% 100%;
   transform: perspective(800px) rotateX(10deg) rotateY(10deg); 
 }
 
 30% {
   opacity: 1;
   transform-origin: 0% 100%;
   transform: perspective(800px) rotateX(0deg) rotateY(0deg);
 } */
  
  /* 40% {
     opacity: 1;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }
   */
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
}

.tinUpIn {
  animation-name: tinUpIn;
  animation-delay:1.5s;
   -webkit-animation-delay:1.5s; /*  Safari 和 Chrome */
}
@keyframes tinUpIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(-900%);
  }

 /*  50%, 70%, 90% {
   opacity: 1;
   transform: scale(1.1, 1.1) translateY(0);
 } */

  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
}
</style>

